<template>
  <Container>
    <div class="container-header title title-center" slot="header">批量奖惩积分
      <Button size="large" class="fl btn-back" icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <Tabs v-model="tab">
      <Button size="large" class="item" type="primary" slot="extra" @click="importGoal()">导入模板</Button>
      <div class="item" slot="extra">
        小计:共<span class="font-red">{{list.data.length}}</span>家门店，加积分<span class="font-red">{{addIntegral}}</span>、扣积分<span class="font-red">{{reduceIntegral}}</span>
      </div>
      <Button
        slot="extra"
        size="large"
        class="item"
        type="primary"
        @click="onAddStore">添加门店</Button>
      <TabPane label="批量奖惩积分" name="tab1">
         <homeTable
          :list="list"
          :hasPage="false"
        />
      </TabPane>
    </Tabs>
    <AddEditItem ref="addEdit" @complete="onComplete"/>
    <div class="container-footer bg-white" slot="footer">
      <Button type="primary" class="mr" :disabled="btnDisable" size="large" @click="onSave">提交</Button>
    </div>
    <ImportsEditItem ref="importsEditItem" @complete="getData"></ImportsEditItem>
  </Container>
</template>
<script>
import BatchIntegralData from './integral/BatchIntegralData'
import homeTable from '@/components/homeTable'
import AddEditItem from './list/AddEditItem'
import ImportsEditItem from './integral/ImportsEditItem'
export default {
  name: 'welfare/batch/integral',
  components: {
    homeTable,
    AddEditItem,
    ImportsEditItem
  },
  data() {
    return {
      tab: "tab1",
      list: BatchIntegralData,
      addIntegral: 0,
      reduceIntegral: 0,
      btnDisable: false
    };
  },
  mounted() {
    this.list.data = []
    this.$bus.$on('onDel', ({row}) => {this.onDel(row)})
    this.$bus.$on('onChangeIntegral', ({row, index, type}) => {this.onChangeIntegral(row, index, type)})
    this.getData()
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    getData (e) {
      if (e) {
        this.list.data = e.map(item => {
          return {
            integral: item.integral,
            rebate: item.rebate,
            rewardRemark: item.rewardRemark,
            storeContactName: item.storeContactName,
            storeContractId: item.storeContractId,
            storeId: item.storeId,
            storeName: item.storeName,
            storePhone: item.storePhone,
            integralHidden: item.integral && item.integral !== 0 ? true : false,
            remarkHidden: item.rewardRemark ? true : false
          }
        })
        this.onCount()
      }
    },
    onDel(row) {
      this.list.data.splice(row._index, 1)
      this.onCount()
    },
    onChangeIntegral(row, index, type) {
      this.$set(this.list.data, index, row)
      this.onBlur()
      if (type === 'remark') return
      this.onCount()
    },
    onCount() {
      let addArr = this.list.data.filter(item => item.integral > 0)
      let reduceArr = this.list.data.filter(item => item.integral < 0)
      this.addIntegral = addArr.reduce((prev, next, index) => {
        return prev + next.integral
      }, 0)
      this.reduceIntegral = reduceArr.reduce((prev, next, index) => {
        return prev + next.integral
      }, 0)
    },
    onBlur() {
      let copyArr = [...this.list.data]
      copyArr.forEach((item, index) => {
        if (!item.integral && item.integral !== 0) {
          item.integralHidden = false
        } else {
          item.integralHidden = true
        }
        if (!item.rewardRemark) {
          item.remarkHidden = false
        } else {
          item.remarkHidden = true
        }
      })
      this.list.data = [...copyArr]
    },
    onAddStore() {
      this.$refs.addEdit.resetForm(this.list.data)
    },
    onComplete(item) {
      this.list.data.push({
        id: item.id,
        storeContractId: item.storeContractId,
        storeName: item.label,
        storeContactName: item.ownerName,
        storePhone: item.storePhone,
        rewardRemark: item.rewardRemark,
        integral: item.rewardIntegral
      })
    },
    importGoal() {
      this.$refs.importsEditItem.openModal()
    },
    onSave() { // 1积分 2返利
      if (!this.list.data.length) {
        this.$Notice.warning({
          title: '提示',
          desc: '请先添加门店'
        })
        return
      }
      if (this.list.data.some(item => !item.integralHidden || !item.remarkHidden)) return
      this.btnDisable = true
      let param = {
        list: this.list.data.map(item => {
          return {
            rewardIntegral: item.integral,
            rewardRemark: item.rewardRemark,
            storeContractId: item.storeContractId
          }
        }),
        rewardType: 1
      }
      this.$jsonPost('/assets/store_reward/batch/reward', param).then(data => {
        this.btnDisable = false
        this.$router.push({
          name: 'welfare/batch/list'
        })
      }).catch(() => {
        this.btnDisable = false
      })
    },
  }
};
</script>
